import React, {
    forwardRef,
    useEffect,
    useImperativeHandle,
    useRef,
    useState,
} from 'react';
import {
    Divider,
    Form,
    Input,
    Modal,
    Steps,
    Select,
    Message,
} from '@arco-design/web-react';
import {
    addLessonApi,
    addStudentsApi,
    getAllDicApi,
    getDicValueApi,
    getLessonsApi,
    getTreeApi,
    updateLessonApi,
    getMajorStudentApi
} from '@/request/api';
const Step = Steps.Step;
const FormItem = Form.Item;
const TextArea = Input.TextArea;

const Option = Select.Option;

const Student = forwardRef(
    (
        props: {
            cancelBackToRefresh;
        },
        ref
    ) => {
        const [visible, setVisible] = useState(false); // table
        const [step, setStep] = useState(1);
        let id  = ""
        useImperativeHandle(ref, () => ({
            changeVal: (newVal) => {
                setVisible(newVal);
            },
            setUpdateId: (newVal) => {
                id = newVal
                setUpdateId(newVal);
            },
            setFormData: (newVal) => {
                form.setFieldsValue(newVal);
            },
            resetFormData: () => {
                form.resetFields();
            },
        }));

        const [form] = Form.useForm();
        const formRef = useRef();
        const [formData, setFormData] = useState(null);
        const [updateId, setUpdateId] = useState();
        const [teachers, setTeachers] = useState([]); //课程体系

        useEffect(() => {
            fetchTeachers();
        }, []);

        const fetchTeachers = () => {
            getAllDicApi({
                sysRoleId: 3,
            })
                .then((res) => {
                    const { data } = res;
                    setTeachers(data);
                })
                .catch((e) => {
                    console.log(e);
                });
            console.log(id, "专业下面的学生")
        };

        const onValuesChange = (changeValue, values) => {
            setFormData(values);
        };

        const onOK = async () => {
            try {
                await form.validate();
                addStudentsApi({ ids: updateId, ...formData })
                    .then((res) => {
                        const { msg } = res;
                        Message.success(msg);
                        setVisible(false);
                        props.cancelBackToRefresh();
                    })
                    .catch((e) => {
                        console.log(e);
                    });
            } catch (e) { }
        };

        return (
            <Modal
                title="课程学生"
                visible={visible}
                onOk={onOK}
                onCancel={() => setVisible(false)}
            >
                <Form
                    autoComplete="off"
                    form={form}
                    ref={formRef}
                    onValuesChange={onValuesChange}
                >
                    <FormItem label="课程学生" field="teacherIdList">
                        <Select mode="multiple" placeholder="下拉选择" allowClear>
                            {teachers.map((option, index) => (
                                <Option key={option.key} value={option.key}>
                                    {option.value}
                                </Option>
                            ))}
                        </Select>
                    </FormItem>
                </Form>
            </Modal>
        );
    }
);

export default Student;
